<!--
 * @Description:动画匀速左侧小案例
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-23 22:40:37
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>动画匀速左侧小案例</title>
	<style>
		*{margin: 0; padding: 0;}
		#tudou{
			position: fixed;
			bottom: 100px;
			right: 0;
		}
		#tudou a{
			display: block;
			padding: 10px;
			border: 1px solid #BEB9F9;
			border-radius: 5px 0 0 5px;
			width: 75px;
			background: url(img/1.jpg) no-repeat 10px center;
			background-size: cover;
			padding-left: 35px;
			color: #333;
			text-decoration: none;
			font-size: 12px;
			line-height: 20px;
			margin-bottom: 10px;
			position: relative;
			left: 88px;
		}
		#tudou .top{
			background-image: url(img/3.jpg);
		}
	</style>
	<script>
		window.onload = function () {
			function $(id) {
				return document.getElementById(id);
			}
			//封装匀速运动
			function animate(obj, target, speed) {
				//物体左边距大于目标距离 - 否则 +
				var speedis = obj.offsetLeft > target ? -speed : speed
				clearInterval(obj.timer)
				obj.timer = setInterval(() => {
					var result = target - obj.offsetLeft//因为差值不会小于5
					obj.style.left = obj.offsetLeft + speedis + "px"
					if (Math.abs(result) <= speed) { //何时停止 小于步长speed 
						clearInterval(obj.timer)//说明已经到达位置了
						obj.style.left = target + "px"
					}
				}, 30)
			}
			
			var as = $("tudou").children;
			for (var i = 0; i < as.length; i++) {
				as[i].onmousemove=function(){
					animate(this,0,10)
				}
				as[i].onmouseout=function(){
					animate(this,88,10)
				}
			}
			

			// var arr=[]
			// arr.index=10
			// btn400.onclick = function () {
			// 	animate($("run"), 400)
			// }
		}
	</script>
</head>

<body>
	<div id="tudou">
		<a href="javascript:;">帮助反馈</a>
		<a href="javascript:;" class="top">返回顶部</a>
	</div>
</body>

</html>